<template>
  <div class="personal-order-item">
    <div class="personal-order-item-header">
      <div class="personal-order-item-date">{{$t('message.orderTime')}}：<span>{{ order.create_time*1000 | date }}</span></div>
      <div class="personal-order-item-number">{{$t('message.orderNum')}}：<span>{{ order.order_number }}</span></div>
      <div class="personal-order-item-delete" v-if="showDelete" @click="deleteOrder(order.order_num_md5)"></div>
    </div>
    <!--商品-->
    <ul class="personal-order-item-content">
      <li class="product-image">
        <div class="product-item">
          <router-link :to="{path: '/detail/product', query: {goodsId: this.order.goods_id}}" target="_blank"><img v-lazy="order.icon1" :alt="order.name" imgtype="orderImg" :title="order.name"/></router-link>
        </div>
      </li>
      <li class="product-information">
        <div class="product-item">
          <p class="product-information-title">
            <router-link :to="{path: '/detail/product', query: {goodsId: this.order.goods_id}}" target="_blank">{{ order.name }}{{ order.sub_name }}</router-link>
          </p>
          <p class="product-information-label1">{{ order.sxzh_name }}</p>
          <p class="product-information-label2">{{ order.yjsx_value }}</p>
        </div>
      </li>
      <li class="product-price">
        <div class="product-item">
          {{ order.goods_price }}
        </div>
      </li>
      <li class="product-divider">
        <div class="divider"></div>
      </li>
      <li class="product-pay">
        <div class="product-item">
          <p class="pay-total">{{ order.current_pay }}</p>
          <p class="pay-freight">({{$t('message.withFreight')}}{{ order.freight }})</p>
        </div>
      </li>
      <li class="product-state">
        <div class="product-item">
          <ul>
            <li>{{ order.order_status | orderStatusText }}</li>
            <!--订单详情-->
            <li class="product-state-link"><router-link :to="{path: '/personal/order/detail', query: {orderId: this.order.order_num_md5}}">{{$t('message.orderDetail')}}</router-link></li>
            <!--查看物流-->
            <!--<li class="product-state-link" v-if="order.order_status === 7 || order.order_status === 9"><router-link :to="{path: '/personal/order/logistics', query: {orderId: this.order.order_num_md5}}" target="_blank">{{$t('message.logistics')}}</router-link></li>-->
            <!--退货进度-->
            <li class="product-state-link" v-if="order.order_status === 8 || order.order_status === 12 || order.order_status === 13 || order.order_status === 14 || order.order_status === 24 || order.order_status === 26"><router-link :to="{path: '/personal/order/return', query: {orderId: this.order.order_num_md5}}">{{$t('message.returnState')}}</router-link></li>
            <!--换货进度-->
            <li class="product-state-link" v-if="order.order_status === 15 || order.order_status === 16 || order.order_status === 17 || order.order_status === 18 || order.order_status === 19 || order.order_status === 20 || order.order_status === 22 || order.order_status === 23 || order.order_status === 25"><router-link :to="{path: '/personal/order/barter', query: {orderId: this.order.order_num_md5}}">{{$t('message.barterState')}}</router-link></li>
          </ul>
        </div>
      </li>
      <li class="product-operation">
        <div class="product-item">
          <div class="operation-pay" v-if="order.order_status === 2">
            <div class="operation-pay-btn" @click="saveOrder">
              <router-link :to="{ path: '/pay', query: { type: 1 } }" target="_blank">{{ $t('message.pay2') }}</router-link>
            </div>
            <!-- <div class="operation-pay-time">
              剩余{{ remainingTime }}
            </div> -->
          </div>
          <!--取消订单-->
          <div class="operation-link active" v-if="order.order_status === 1 || order.order_status === 2" @click="cancelOrder(order.order_num_md5)">
            {{$t('message.cancelOrder')}}
          </div>
          <!--申请售后-->
          <!--<div class="operation-link" v-if="order.order_status === 9 || order.order_status === 19">-->
          <div class="operation-link" v-if="order.order_status === 9">
            <router-link class="order-status-btn-pay-active" :to="{path: '/personal/order/afterSale', query: {orderId: this.order.order_num_md5}}" target="_blank" v-if="order.can_return === 1">{{$t('message.applyReturn')}}</router-link>
            <p style="color:#a5a5a5" v-else-if="order.can_return === 0" @mouseenter="warnShow = true" @mouseout="warnShow = false">{{$t('message.applyReturn')}}</p>
            <!-- tips -->
            <div class="warmPrompt" v-show="warnShow">
            <!-- <div class="warmPrompt"> -->
              <div class="top-triangle"></div>
              <span v-html="$t('message.returnIn7Days')"></span>
            </div>
          </div>
          <div class="operation-link" v-if="order.order_status === 19">
            <router-link class="order-status-btn-pay-active" :to="{path: '/personal/order/barter', query: {orderId: this.order.order_num_md5, orderType: 'barterComplete'}}" target="_blank" v-if="order.can_return === 1">{{$t('message.applyReturn')}}</router-link>
            <p style="color:#a5a5a5" v-else-if="order.can_return === 0" @mouseenter="warnShow = true" @mouseout="warnShow = false">{{$t('message.applyReturn')}}</p>
            <!-- tips -->
            <div class="warmPrompt" v-show="warnShow">
              <!-- <div class="warmPrompt"> -->
              <div class="top-triangle"></div>
              <span v-html="$t('message.returnIn7Days')"></span>
            </div>
          </div>
          <!--再次购买-->
          <!--<div class="operation-link" v-if="order.order_status === 3">-->
            <!--<router-link class="order-status-btn-pay-active" :to="{path: '/buy', query: {orderId: this.order.order_num_md5}}" target="_blank">{{$t('message.buyAgain')}}</router-link>-->
          <!--</div>-->
        </div>
      </li>
    </ul>
    <!--赠品-->
    <template v-if="order.gives && order.gives.length !== 0">
      <ul class="personal-order-item-content" v-for="(item, index) in order.gives" :key="index">
        <li class="product-image">
          <div class="product-item">
            <router-link :to="{path: '/detail/product', query: {goodsId: item.id}}" target="_blank"><img :src="item.icon1" :alt="item.goods_name" :title="item.goods_name"/></router-link>
          </div>
        </li>
        <li class="product-information">
          <div class="product-item">
            <p class="product-information-title">
              <router-link :to="{path: '/detail/product', query: {goodsId: item.id}}" target="_blank">{{ item.goods_name }}{{ item.sub_name }}</router-link>
            </p>
            <p class="product-information-label1">{{ item.sxzh_name }}</p>
            <p class="product-information-label2">{{ item.yjsx_value }}</p>
          </div>
        </li>
        <li class="product-price">
          <div class="product-item">
            {{ $t('message.gifts') }}
          </div>
        </li>
        <li class="product-divider">
          <div class="divider"></div>
        </li>
      </ul>
    </template>
  </div>
</template>

<script>
import { setCookie } from '@/util/util'

  //  我的订单
export default {
  props: {
    order: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      remainTime: this.order.time,
      warnShow: false
    }
  },
  computed: {
    getDate () {
      let date = new Date(parseInt(this.order.date))
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let minute = date.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      let second = date.getSeconds()
      second = second < 10 ? '0' + second : second
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
    },
    //  是否显示删除订单按钮
    showDelete () {
      let state = this.order.order_status
      // let finish = this.order.pay_status
      if (state === 3 || state === 9) {
        return true
      } else {
        return false
      }
    },
    showLogistics () {
      let state = this.order.state
      if (state === 'hasSent' || state === 'hasGot' || state === 'transactionSuccess') {
        return true
      } else {
        return false
      }
    },
    showReject () {
      let state = this.order.state
      if (state === 'rejecting' || state === 'hasRejected') {
        return true
      } else {
        return false
      }
    },
    remainingTime () {
      if (this.remainTime > 0) {
        let time = parseInt(this.remainTime) / 1000
        let hours = parseInt(time / 3600)
        let minutes = parseInt(time % 3600 / 60)
        hours = hours > 9 ? hours : '0' + hours
        minutes = minutes > 9 ? minutes : '0' + minutes
        return hours + '时' + minutes + '分'
      }
    }
  },
  methods: {
    saveOrder () {
      var price
      if (this.order.code_price !== 0) {
        price = (parseFloat(this.order.first_pay) - parseFloat(this.order.code_price)).toFixed(2)
        if (price < 0 || price === 0) price = 1
        let obj = JSON.stringify({ goodsPrice: price, orderNumber: this.order.order_num_md5 })
        //  sessionStorage.setItem('payResult', obj)
        setCookie('payResult', obj)
      } else {
        let obj = JSON.stringify({ goodsPrice: this.order.current_pay, orderNumber: this.order.order_num_md5 })
        //  sessionStorage.setItem('payResult', obj)
        setCookie('payResult', obj)
      }
    },
    deleteOrder (number) {
      this.$emit('delete-order', number)
    },
    cancelOrder (number) {
      this.$emit('cancel-order', number)
    }
  },
  mounted () {
    if (this.order.state === 'waitToPay') {
      setInterval(() => {
        this.remainTime -= 1000
      }, 1000)
    }
  }
}
</script>

<style scoped>
.personal-order-item {
  width: 864px;
  /* overflow: hidden; */
}

.personal-order-item-header {
  height: 50px;
  line-height: 50px;
  background-color: #f7f7f7;
  border: 1px solid #e0e0e0;
  padding-left: 23px;
  overflow: hidden;
}

.personal-order-item-date {
  float: left;
  font-size: 14px;
  color: #a5a5a5;
  margin-right: 40px;
}

.personal-order-item-date span {
  color: #333;
}

.personal-order-item-number {
  float: left;
  font-size: 14px;
  color: #a5a5a5;
}

.personal-order-item-number span {
  color: #333;
}

.personal-order-item-delete {
  width: 24px;
  height: 24px;
  float: right;
  background: url(../../../assets/images/personal/icon_delete_normal.png) no-repeat center;
  background-size: contain;
  margin-top: 13px;
  margin-right: 23px;
  cursor: pointer;
}

.personal-order-item-delete:hover {
  background: url(../../../assets/images/personal/icon_delete_hover.png) no-repeat center;
}

.personal-order-item-content {
  height: 147px;
  border: 1px solid #e0e0e0;
  border-top: 0;
}

.personal-order-item-content > li {
  float: left;
  height: 147px;
  display: table;
}

.personal-order-item-content .product-item {
  display: table-cell;
  vertical-align: middle;
  height: 20px;
  line-height: 20px;
  color: #333;
}

.personal-order-item-content .product-image {
  padding: 0 24px 0 23px;
}

.personal-order-item-content .product-image > div {
  width: 100px;
  height: 100px;
}

.personal-order-item-content .product-image img {
  width: 100%;
  height: 100%;
}

.personal-order-item-content .product-information {
  width: 215px;
}

.personal-order-item-content .product-information p {
  width: 180px;
}

.product-information .product-information-title {
  height: 40px;
  line-height: 20px;
  font-size: 14px;
  color: #333;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-information .product-information-title a {
  font-size: 14px;
  color: #333;
}

.product-information .product-information-title a:hover {
  text-decoration: underline;
  color: #ff600a;
}

.product-information .product-information-label1 {
  height: 17px;
  line-height: 17px;
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}

.product-information .product-information-label2 {
  height: 17px;
  line-height: 17px;
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.personal-order-item-content .product-price {
  width: 61px;
  margin-right: 30px;
}

.personal-order-item-content .product-divider .divider {
  height: 147px;
  border-right: 1px solid #e6e6e6;
}

.personal-order-item-content .product-pay {
  width: 112px;
  text-align: center;
  margin-right: 44px;
}

.personal-order-item-content .product-pay .pay-total {
  height: 20px;
  line-height: 20px;
}

.personal-order-item-content .product-pay .pay-freight {
  height: 17px;
  line-height: 17px;
  color: #a5a5a5;
  margin-top: 2px;
}

.personal-order-item-content .product-state {
  width: 128px;
  font-size: 12px;
  text-align: center;
  margin-right: 10px;
}

.personal-order-item-content .product-state-link {
  margin-top: 4px;
}

.personal-order-item-content .product-state-link a {
  color: #ff600a;
}

.personal-order-item-content .product-state-link a:hover {
  text-decoration: underline;
}

.personal-order-item-content .product-operation {
  width: 77px;
  font-size: 12px;
  text-align: center;
}

.personal-order-item-content .product-operation .active {
  color: #ff600a;
}

.personal-order-item-content .product-operation .operation-pay-btn {
  margin-bottom: 4px;
}

.personal-order-item-content .product-operation .operation-pay-btn > a {
  display: inline-block;
  width: 56px;
  height: 27px;
  line-height: 27px;
  color: #fff;
  background-color: #ff600a;
  border: 0;
  border-radius: 2px;
  font-size: 12px;
  cursor: pointer;
}

.personal-order-item-content .product-operation .operation-pay-time {
  height: 17px;
  line-height: 17px;
  color: #a5a5a5;
  margin-bottom: 4px;
}

.personal-order-item-content .product-operation .operation-link {
  position: relative;
  height: 17px;
  line-height: 17px;
  cursor: pointer;
}
.personal-order-item-content .product-operation .operation-link a {
  font-size: 12px;
  color: #333333;
}
.operation-link a:hover {
  text-decoration: underline;
}
.warmPrompt {
  background: white;
  position: absolute;
  left: 50%;
  min-width: 80px;
  max-width: 200px;
  transform: translateX(-50%);
  margin-top: 6px;
  line-height: 17px;
  padding: 11px 16px;
  border: 1px solid #E6E6E6;
  font-size: 12px;
  color: #666666;
  text-align: center;
  white-space: nowrap;
}
.top-triangle {
  height: 0;
  width: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid #e6e6e6;
  position: absolute;
  top: -7px;
  left: 50%;
  margin-left: -3px;
}
</style>
